﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>智能家居登录</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.0-alpha.5/tailwind.min.css" rel="stylesheet">
    <style>
        .dlbox .weixin, .dlbox .weibo {
            display: inline-block;
            width: 32px;
            height: 32px;
            background-size: cover;
        }

        .dlbox .weixin {
            background-image: url(images/weixin.png);
        }

        .dlbox .weibo {
            background-image: url(images/weibo.png);
        }

        .bg-indigo-100 {
            background-color: #ebf4ff;
        }

        .border-gray-200 {
            border-color: #edf2f7;
        }

        .bg-gray-100 {
            background-color: #f7fafc;
        }

        .bg-indigo-500 {
            background-color: #667eea;
        }
    </style>
</head>

<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox">
<div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
    <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
        <div class="mt-12 flex flex-col items-center">
            <h1 class="text-2xl xl:text-3xl font-extrabold">智能家居登录</h1>
            <form action="" method="post">
                {% csrf_token %}

                <div class="w-full flex-1 mt-8">

                    <div class="mx-auto max-w-xs">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                               type="text" placeholder="用户名" name="username">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                               type="password" placeholder="密码" name="password">
                        <button class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none">
                            <span class="ml-3">登 录</span>
                        </button>
                        <p class="mt-6 text-xs text-gray-600 text-center">
                            <a href="{% url 'register' %}" style="color: #292828">用户登录</a>
                        </p>
                        <p class="mt-6 text-xs text-gray-600 text-center">我同意并遵守服务协议</p>
                        <p class="mt-6 text-xs text-gray-600 text-center"><span
                                style="color:red;">{{ form_error }}</span>
                        </p>

                    </div>
                </div>

            </form>
        </div>
    </div>
    <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
        <div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
             style="background-image: url('../../static/user/images/dlbox.svg');"></div>
    </div>
</div>
</body>
</html>